<template>
  <el-card class="box-card">
    <el-form :inline="true">
      <el-form-item label="一级分类">
        <el-select :disabled="scene === 1 || scene === 2" @change="c1Change" v-model="category.c1Id" placeholder="请选择">
          <el-option v-for="item in category.c1Arr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select :disabled="scene === 1 || scene === 2" @change="c2Change" v-model="category.c2Id" placeholder="请选择">
          <el-option v-for="item in category.c2Arr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select :disabled="scene === 1 || scene === 2" @change="c3Change" v-model="category.c3Id" placeholder="请选择">
          <el-option v-for="item in category.c3Arr" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
const category = useCategoryStore();

defineProps(['scene']);

const getC1 = async () => {
  category.getC1();
};

onMounted(() => {
  getC1();
});

const c1Change = (value: number | string) => {
  category.clearc2c3();
  category.c1Id = value;
  category.getC2();
};

const c2Change = (value: number | string) => {
  category.clearc3();
  category.c2Id = value;
  category.getC3();
};

const c3Change = (value: number | string) => {
  category.c3Id = value;
};

// 路由组件切换之后销毁仓库数据
onBeforeUnmount(() => {
  category.$reset();
});
</script>

<style lang="scss" scoped>
.box-card {
  .el-form {
    display: flex;
    justify-content: space-between;

    .el-form-item {
      flex: auto;
      display: flex;
      align-items: center;
      margin: 0;
      &:not(:last-child) {
        margin-right: 20px;
      }
    }
  }
}
</style>
